<template>
  <div>
      <h2>身份证格式校验</h2>
      <div class="container calculator-wrapper">
        <div class="form-group">
          <input 
              v-model="idCardNumber" 
              id="greet-input" 
              type="text" 
              required 
              placeholder="请输入身份证号"
              @input="clearErrorMessage"
          />
        </div>
        <button @click="execute" class="execute-button">验证</button>
        <p class="center-align error-message" v-if="errorMessage">{{ errorMessage }}</p>
        <p class="center-align success-message">{{ greetMsg }}</p>
      </div>
  </div>   
</template>

<script setup lang="ts">
import { ref } from "vue";

const greetMsg = ref("");
const idCardNumber = ref("");
const errorMessage = ref("");

// 新增函数，用于在输入变动时清空errorMessage
const clearErrorMessage = () => {
  errorMessage.value = "";
};

// 校验身份证号函数
function validateIDCard(idCard: string): boolean {
  const regex = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
  if (!regex.test(idCard)) {
    return false;
  }
  // 校验出生日期
  const birthDate = `${idCard.slice(6, 10)}-${idCard.slice(10, 12)}-${idCard.slice(12, 14)}`;
  const date = new Date(birthDate);
  const timestamp = date.getTime();
  if (isNaN(timestamp) || date.getFullYear() < 1900 || date.getFullYear() > new Date().getFullYear()) {
      return false;
  }

  // 校验校验码
  const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
  const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
  let sum = 0;
  for (let i = 0; i < 17; i++) {
      sum += Number(idCard.charAt(i)) * weights[i];
  }
  const mod = sum % 11;
  const lastChar = idCard.charAt(17).toUpperCase();

  if (lastChar!== checkCodes[mod]) {
      return false;
  }

  return true;
}

async function execute() {
  errorMessage.value = "";
  greetMsg.value = "";

  if (idCardNumber.value.length < 18) {
      errorMessage.value = "请输入18位身份证号码！";
      return;
  }

  if (typeof idCardNumber.value!== "string") {
      errorMessage.value = "输入的身份证号格式不正确，请输入字符串类型的身份证号";
      return;
  }

  if (!validateIDCard(idCardNumber.value)) {
      errorMessage.value = "身份证号码无效！";
      return;
  }

  try {
      greetMsg.value = idCardNumber.value + " 是一个有效的身份证号码。";
  } catch (error) {
      greetMsg.value = "身份证号码验证失败。";
      errorMessage.value = "验证过程中出现错误，请稍后重试。";
  }
}
</script>

<style lang="scss" scoped>
@use "../assets/common.scss";

/* 容器样式 */
.calculator-wrapper {
  max-width: 400px;
  padding: 20px;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.form-group {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

label {
  font-size: 16px;
  margin-bottom: 5px;
}

input {
  padding: 10px;
  font-size: 18px;
  border: none;
  outline: none;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

/* 错误消息样式 */
.error-message {
  color: red;
  margin-top: 10px;
  font-size: 14px;
}

/* 成功消息样式 */
.success-message {
  color: #28a745;
  margin-top: 10px;
  font-size: 16px;
}

</style>